<template>
    <div class="devices-card-wrapper">
        <div class="device-card-wrapper" v-for="(device) in devices" >
            <el-card style="width: 220px" shadow="hover">
                <h3>{{device.name}}</h3>
                <el-form>
                    <el-form-item v-for="(parameterBoolean) in device.parameterBooleanList" :label="parameterBoolean.name">
                        <el-switch v-model="parameterBoolean.value" @change="control(device)" />
                    </el-form-item>
                </el-form>
            </el-card >
        </div>
    </div>
</template>

<script>
import { ref, computed } from "vue";
import axios from 'axios';

export default {
  name: "ExploreView",
  setup() {

    // 响应式数据
    const devices = ref({});
    // 从 JSON 文件中获取数据
    (async () => {
      try {
        // 磁力资源分组
        const res = await axios.get("/api/v1/device/map");
        if (res.status === 200 && res.data && res.data.code === 200) {
            devices.value = res.data.data;
        }
      } catch (err) {
        console.log(err)
      }
    }) ();

    return {
        devices
    };
  },
  computed: {

  },
  methods: {
    control (device) {
        console.log(device);
        const params = {
            id: device.id
        };
        device.parameterBooleanList.forEach(parameterBoolean => {
            params[parameterBoolean.id] = parameterBoolean.value;
        });
        (async () => {
            try {
                // 磁力资源分组
                const res = await axios.post('/api/v1/device/control', params);
                console.log(res);
            } catch (err) {
                console.log(err)
            }
        }) ();


    }
  }
};
</script>

<style>

.devices-card-wrapper {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid rgb(228, 231, 237);
    border-radius: 6px;
    margin: 12px;
    padding: 20px 0 0 20px;

    .device-card-wrapper {
        margin: 0 20px 20px 0;
    }

    .empty {
        width: 100%;
        margin: 0 20px 20px 0;

        h3 {
            text-align: center;;
        }
    }
}
</style>